<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/js/album_view.js"></script>
<head th:include="/base/common_css('test')">
<body>
<div th:include="/base/common_banner"></div>
<!-- Header ends -->
<!-- Main content starts -->

<div class="content">

    <!-- Sidebar -->
    <div th:include="/base/common_menu"></div>

    <!-- Sidebar ends -->

    <!-- Main bar -->
    <div class="mainbar">

        <!-- Page heading -->
        <div th:include="/base/common_pageHeader"></div>
        <!-- Page heading ends -->

        <!-- Matter -->

        <div class="matter">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">

                        <div class="widget">
                            <div class="widget-head">
                                <div class="pull-left">专辑描述</div>

                                <div class="widget-icons pull-right">
                                    <button onclick="openPage('/view/albumAdd')" class="btn btn-primary">新增</button>
                                    <!--<li><a href="/view/albumAdd"></a></li>-->
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="widget-content">
                                <table style="table-layout:fixed"
                                       class="table table-condensed table-bordered table-hover table-striped">
                                    <thead>
                                    <tr>
                                        <th>
                            <span class="uni">
                              <input type='checkbox' value='check1'/>全选
                            </span>
                                        </th>
                                        <th>序号</th>
                                        <th>专辑名</th>
                                        <th>专辑描述</th>
                                        <th>收藏数</th>
                                        <th>分享数</th>
                                        <th>评论数</th>
                                        <th>原价</th>
                                        <th>现价</th>
                                        <th>control</th>
                                    </tr>

                                    <tr th:each="obj, objStat:${albumList.list}">
                                        <td>
                            <span class="uni">
                              <input type='checkbox' value='check1'/>
                            </span>
                                        </td>
                                        <td th:text="${objStat.count}"></td>
                                        <td th:text="${obj.albName}"
                                            style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                                            2223333333333333333333333
                                        </td>
                                        <td th:text="${obj.albDescription}"
                                            style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                                            2223333333333333333333333
                                        </td>
                                        <td th:text="${obj.favoriteNum}"></td>
                                        <td th:text="${obj.shareNum}"></td>
                                        <td th:text="${obj.commentNum}">Active</td>
                                        <td th:text="${obj.originalPrice}"></td>
                                        <td th:text="${obj.presentPrice}"></td>
                                        <td>
                                            <a th:href="@{'/view/albumAdd?albId='+${obj.albId}}"
                                               class="btn btn-success">修改</a>&nbsp;&nbsp;&nbsp;
                                            <a th:href="@{'/view/deleteAlbum?albId='+${obj.albId}}"
                                               class="btn btn-danger">删除</a>
                                        </td>

                                    </tr>
                                    </thead>

                                </table>

                                <!--分页-->
                                <div class="widget-foot">
                                    <div id="page1">
                                        <input type="hidden" id="pageNumber" th:value="${albumList.pageNum}">
                                        <input type="hidden" id="pageSize" th:value="${albumList.pageSize}">
                                        <input type="hidden" id="totalPage" th:value="${albumList.pages}">
                                        <input type="hidden" id="total" th:value="${albumList.total}">
                                    </div>
                                </div>

                                <!-- Mainbar ends -->
                                <div class="clearfix"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Matter ends -->

    </div>

    <!-- Mainbar ends -->
    <div class="clearfix"></div>

</div>
<!-- Content ends -->

<div th:include="/base/common_footer"></div>
<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span>
<!--js????-->
<div th:include="/base/common_js"></div>
<!--js????-->

<!-- Script for this page -->
<script type="text/javascript">
    initPage('page1', '/view/statement', {}, false);

    $(function () {

        /* Bar Chart starts */

        var d1 = [];
        for (var i = 0; i <= 20; i += 1)
            d1.push([i, parseInt(Math.random() * 30)]);

        var d2 = [];
        for (var i = 0; i <= 20; i += 1)
            d2.push([i, parseInt(Math.random() * 30)]);


        var stack = 0, bars = true, lines = false, steps = false;

//        function plotWithOptions() {
//            $.plot($("#bar-chart"), [d1, d2], {
//                series: {
//                    stack: stack,
//                    lines: {show: lines, fill: true, steps: steps},
//                    bars: {show: bars, barWidth: 0.8}
//                },
//                grid: {
//                    borderWidth: 0, hoverable: true, color: "#777"
//                },
//                colors: ["#ff6c24", "#ff2424"],
//                bars: {
//                    show: true,
//                    lineWidth: 0,
//                    fill: true,
//                    fillColor: {colors: [{opacity: 0.9}, {opacity: 0.8}]}
//                }
//            });
//        }

//        plotWithOptions();

        $(".stackControls input").click(function (e) {
            e.preventDefault();
            stack = $(this).val() == "With stacking" ? true : null;
//            plotWithOptions();
        });
        $(".graphControls input").click(function (e) {
            e.preventDefault();
            bars = $(this).val().indexOf("Bars") != -1;
            lines = $(this).val().indexOf("Lines") != -1;
            steps = $(this).val().indexOf("steps") != -1;
//            plotWithOptions();
        });

        /* Bar chart ends */

    });


    /* Curve chart starts */

    $(function () {
        var sin = [], cos = [];
        for (var i = 0; i < 14; i += 0.5) {
            sin.push([i, Math.sin(i)]);
            cos.push([i, Math.cos(i)]);
        }

//        var plot = $.plot($("#curve-chart"),
//                [{data: sin, label: "sin(x)"}, {data: cos, label: "cos(x)"}], {
//                    series: {
//                        lines: {show: true, fill: true},
//                        points: {show: true}
//                    },
//                    grid: {hoverable: true, clickable: true, borderWidth: 0},
//                    yaxis: {min: -1.2, max: 1.2},
//                    colors: ["#1eafed", "#1eafed"]
//                });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #000',
                padding: '2px 8px',
                color: '#ccc',
                'background-color': '#000',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#curve-chart").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if ($("#enableTooltip:checked").length > 0) {
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);

                        showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                    }
                }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            }
        });

        $("#curve-chart").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
//                plot.highlight(item.series, item.datapoint);
            }
        });

    });
    //注册新增按钮的事件
    $("#saveAlbum").click(function () {
        $("#myModalLabel1").text("新增");
        $('#myModal1').modal();

    });
    //注册修改按钮的事件
    $("#btn_edit").click(function () {
        $("#myModalLabel2").text("修改");
        $('#myModal2').modal();
    });
    //注册删除按钮的事件
    $("#btn_delete").click(function () {
        $("#myModalLabel3").text("删除");
        $('#myModal3').modal();
        var a = $("input#albId.form-control").val();
        alert(1);
        //var a =$('#albId').val();
        console.log(a);
    });

    $("#btn_submit").click(function () {
        $("#myModalLabel1").text("保存");
        $('#myModal1').modal();
        /*var a = $("input#albName1.form-control").val();
         console.log(a);
         alert (1);*/
        $.ajax({
            type: "post",
            url: "/view/saveAlbum",
            data: {
                albName: $('#albName1').val(),
                albdescription: $('#albdescription1').val(),
                favoriteNum: $('#favoriteNum1').val(),
                shareNum: $('#shareNum1').val(),
                commentNum: $('#commentNum1').val(),
                cateName: $('#cateName1').val(),
            },
            dataType: "json",
            success: function (data) {
                if (data.success == true) {
                    alert("保存成功");
                } else {
                    alert("保存失败");
                }
            },
            error: function (err) {
                alert("错误");
            }
        });
    });

    /* Curve chart ends */

</script>

</body>
</html>
